<template>
  <div class="boxall">
    <div v-if="showLogin">
      <div class="login_form">
        <div class="title" style="font-size: 30px">用户登录</div>
        <el-form>
          <el-form-item>
            <span slot="label">
              <span style="color: #fff">用户名</span>
            </span>
            <el-input
              v-model="loginForm.username"
              label="用户名："
              placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item>
            <span slot="label">
              <span style="color: #fff">密码</span>
            </span>
            <el-input
              v-model="loginForm.password"
              label="密码："
              placeholder="请输入密码"
              type="password"
            />
          </el-form-item>
        </el-form>
        <el-button @click="login">登 录</el-button>
        <el-button @click="goRegister">注 册</el-button>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      //显示登录窗口
      showLogin: true,
      disabled: false,
      codeActive: false,
      //提交登录信息
      loginForm: {
        username: "",
        password: "",
      },
    };
  },

  mounted(){

  },
  methods: {
    //点击注册时
    goRegister() {

      this.$router.push("/register");
    },
    //点击登录时
    goLogin() {
      this.showRegister = false;
      this.showLogin = true;
    },

    //用户登录
    async login() {
      if (this.loginForm.username === "" && this.loginForm.password === "") {
        this.$message.error("请输入用户名");
      }
      if (this.loginForm.username === "" && this.loginForm.password !== "") {
        this.$message.error("请输入用户名");
      }
      if (this.loginForm.username !== "" && this.loginForm.password === "") {
        this.$message.error("请输入密码");
      }
      const { data: res } = await this.$http.login(this.loginForm);
      if (res.code === 400) {

        this.$message.error(res.message);
        return;
      }
      console.log("登录成功");
      this.$message.success(res.message);

      this.$store.dispatch("setUser", res);
      this.$router.push("/PersonalInfo");

    },
  },
};
</script>

<style lang="scss" scope>
.boxall {
  min-height: 600px;
  margin: 0 auto;
  background: url(../assets/image/bj_04.jpg) no-repeat;
  background-size: 100% 100%;
}

.root {
  text-align: center;
  margin: 0 auto;
}
.back {
  font-size: 0.7rem;
  margin-top: 0.2rem;
  display: flex;
  margin-right: auto;
}

.login_form {
  padding: 1rem;
  font-size: 0.7rem;
  width: 30%;
  margin: 0 auto;
  color: #fff;

  .title {
    text-align: center;
    font-size: 0.5rem;
  }

  .login_btns {
    width: 8rem;
    margin: 0 auto;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;

    button {
      color: #fff;
      border: none;
      height: 1rem;
      font-size: 0.4rem;
      margin-bottom: 0.5rem;
      border-radius: 1rem;
    }
    button:first-child {
      background: linear-gradient(92deg, #0bab20, #78ff83);
    }
    button:nth-child(2) {
      background: linear-gradient(92deg, #f8bb2c, #e2ca92);
    }
    button:last-child {
      background: linear-gradient(92deg, #365fff, #36bbff);
    }
  }
}
form {
  margin-top: 1rem;
  input {
    width: 8rem;
    height: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.45rem;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
  }
}
.mine {
  .top {
    width: 100%;
    height: 7rem;
    position: relative;
    overflow: hidden;
    &:before {
      position: absolute;
      content: " ";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(0.2rem);
      background-repeat: no-repeat;
      background-size: 100%;
      transform: scale(1.2);
    }
    .user {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      flex-direction: column;
      .avatar {
        overflow: hidden;
        width: 2rem;
        border-radius: 1rem;
        height: 2rem;
        img {
          width: 100%;
        }
      }
      .userinfo {
        text-align: center;
        color: #fff;
        .username {
          font-size: 0.4rem;
          margin: 0.2rem;
        }
        .userinfo_detail {
          font-size: 0.3rem;
          span {
            padding: 0 0.3rem;
            background-color: #dd2a3b;
            border-radius: 0.1rem;
            margin-right: 0.3rem;
          }
        }
      }
    }
  }
  .bottom {
    hr {
      border-top: 0;
    }
    padding: 0.3rem;
    background-color: #f9f9f9;
    .info_item {
      padding: 0.5rem;
      margin-bottom: 0.2rem;
      background-color: #fff;
      border-radius: 0.2rem;
      .info_top,
      .info_center,
      .info_bottom {
        display: flex;
        flex-direction: row;
      }
      .left {
        font-size: 0.4rem;
      }
      .right {
        font-size: 0.35rem;
        color: #aaa;
        margin-left: auto;
      }
    }
  }
}
</style>
